<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <link rel="icon" type="text/css" href="img/favicon.ico">
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/product_details.css">
    <link rel="stylesheet" href="css/date.css">
    <link rel="stylesheet" href="css/dateDefault.css">
</head>
<body>
    <!--网页头部-->
    <div id="userheader"></div>
    <!--内容-->
    <div id="content">
        <!--内容导航栏-->
        <div class="row">
            <nav class="navbar navbar-default">
                <div class="container">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">家具租赁</a>
                        </li>
                        <li>
                            <a href="#">增值服务</a>
                        </li>
                        <li>
                            <a href="#">最新咨询</a>
                        </li>
                        <li>
                            <a href="#">个人中心</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <!--内容-->
            <!--左边-->
            <div class="container">
                <div id="middle">
                    <div id="top">
                        <div class="left">
                            <div class="col-sm-13 col-md-7">
                                <div class="A">
                                    <ul>
                                        <li>
                                            <img class="my-small" src="./img/adventure.jpg" data-target="img/adventure1.jpg">
                                        </li>
                                        <li>
                                            <img class="my-small" src="./img/adventure.jpg" data-target="img/adventure2.1.jpg">
                                        </li>
                                        <li>
                                            <img class="my-small" src="./img/adventure.jpg" data-target="img/adventure3.1.jpg">
                                        </li>
                                        <li>
                                            <img class="my-small" src="./img/adventure.jpg" data-target="img/adventure4.jpg">
                                        </li>
                                    </ul>
                                    <div class="img1">
                                        <img src="./img/adventure1.jpg" class="my-big">
                                        <div class="caption">
                                            <p>押金 : 当前押金 : ¥3460.00 , 押金应付 : ¥3460.00 , 您可用免押金额度为¥0
                                                <a style="color: #b34848" href="#">开通免押金</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5>最佳搭配</h5>
                                    </div>
                                    <div class="panel-body">
                                        <div class="img2">
                                            <dl>
                                                <dt><img src="./img/adventure.jpg"></dt>
                                                <dd>¥199</dd>
                                            </dl>
                                            <img style="margin:40px 6px 0 6px;" class="D" src="./img/adventure4%20(2).png">
                                        </div>
                                        <div class="img2">
                                            <dl>
                                                <dt><img src="./img/adventure.jpg"></dt>
                                                <dd>¥199</dd>
                                            </dl>
                                            <img style="margin:40px 6px 0 6px;" class="D" src="./img/adventure4%20(2).png">
                                        </div>
                                        <div class="img2">
                                            <dl>
                                                <dt><img src="./img/adventure.jpg"></dt>
                                                <dd>¥199</dd>
                                            </dl>
                                            <img style="margin:40px 6px 0 6px;" class="D" src="./img/adventure5.png">
                                        </div>
                                        <div class="img3">
                                            <p>已选<span style="color:#f29600;">3</span>个配件 套餐价<span style="color:#b34848;">¥166</span>
                                            </p>
                                            <button type="button" class="btn btn-warning">加入购物车</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--右边-->
                        <div class="right">
                            <div class="col-sm-11 col-md-5">
                                <div class="con1">
                                    <h3>欧派多功能组合办公桌</h3>
                                    <p>单人 双人 多人多功能适用</p>
                                    <div style="font-size: 18px; font-weight: normal;">
                                        颜色:
                                        <div class="demo&#45;&#45;radio" style="cursor:pointer">
                                            <div style="background-color:#8ba0a8;" class="demo&#45;&#45;radioInput"></div>
                                        </div>
                                        <div class="demo&#45;&#45;radio active" style="cursor:pointer">
                                            <div style="background-color:#ccc;" class="demo&#45;&#45;radioInput"></div>
                                        </div>
                                        <div class="demo&#45;&#45;radio" style="cursor:pointer">
                                            <div style="background-color:#9a5632;" class="demo&#45;&#45;radioInput"></div>
                                        </div>
                                    </div>

                                </div>
                                <div class="con2">
                                    <p style="font-size: 18px;">选择:</p>
                                    <label class="active">
                                        <b class="active"></b>
                                        <span>单人型实木老板桌椅2.2*0.8M</span>
                                    </label>
                                    <br>
                                    <label>
                                        <b></b>
                                        <span>T字型两人位含柜2.4*1.4*1.1M</span>
                                    </label>
                                    <br>
                                    <label>
                                        <b></b>
                                        <span>F型摆放两人位含柜1.2*2.8M</span>
                                    </label>
                                    <br>
                                    <label>
                                        <b></b>
                                        <span>F型摆放两人位含柜1.2*2.8M</span>
                                    </label>
                                    <br>
                                    <label>
                                        <b></b>
                                        <span>F型摆放两人位含柜1.2*2.8M</span>
                                    </label>
                                    <br>
                                    <label>
                                        <b></b>
                                        <span>F型摆放两人位含柜1.2*2.8M</span>
                                    </label>
                                    <br>
                                    <label>
                                        <b></b>
                                        <span>F型摆放两人位含柜1.2*2.8M</span>
                                    </label>
                                    <br>
                                    <label>
                                        <b></b>
                                        <span>F型摆放两人位含柜1.2*2.8M</span>
                                    </label>
                                    <br>
                                    <label>
                                        <b></b>
                                        <span>F型摆放两人位含柜1.2*2.8M</span>
                                    </label>
                                </div>
                                <div class="con3">
                                    <p style="font-size: 18px;">租赁方式： </p>
                                    <div class="Ks">
                                        <div class="K1 active">
                                            <label style="color: #ccc;">
                                                <b class="active"></b>&nbsp;&nbsp;&nbsp;
                                                随租随还
                                            </label>
                                            <p>租金：<span>¥199</span></p>
                                            <p style="margin-bottom: 11px;">租期：<span>24个月</span></p>
                                        </div>
                                        <div class="K1">
                                            <label style="color:#ccc;">
                                                <b></b>&nbsp;&nbsp;&nbsp;
                                                租完即送
                                            </label>
                                            <p>租金：<span>¥254</span></p>
                                            <p style="margin-bottom: 11px;">租期：<span>24个月</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="con4">
                                    <div class="one">
                                        <p style="cursor:pointer">数量:</p>
                                        <div class="number">
                                            <b class="glyphicon glyphicon-minus-sign"></b>
                                            <span id="boom">0</span>
                                            <b class="glyphicon glyphicon-plus-sign"></b>
                                        </div>
                                    </div>
                                    <div class="two">
                                        <label style="font-weight: normal; font-size: 18px;">使用日期：</label>
                                        <input type="text" id="date">
                                    </div>
                                    <div class="three">
                                        <button style="background-color:#f29600; " type="button" class="btn btn-warning">
                                            加入购物车
                                        </button>
                                        <button style="background-color:#b34848; " type="button" class="btn btn-danger">
                                            立即租赁
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 产品信息 下面 -->
                    <div id="bom">
                        <div>
                            <div class="panel-heading">
                                <h3 style="margin-top: 10px;">产品信息</h3>
                            </div>
                            <div class="panel-body">
                                <div class="P1">
                                    <img src="./img/adventure2.jpg">
                                    <h1>欧派打造极致简约办公风格</h1>
                                    <p>清新淡雅 沉着冷静</p>
                                    <p>单人 | 双人 | 多人 | 多功能办公桌椅</p>
                                </div>
                                <div class="P2">
                                    <img src="./img/adventure3.jpg">
                                    <h1>“新”冷淡风格 是一种怎样的体验？</h1>
                                    <p>清新淡雅 沉着冷静</p>
                                    <p>单人 | 双人 | 多人 | 多功能办公桌椅</p>
                                </div>
                                <div class="P3">
                                    <img src="./img/adventure4.png">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootlint.js"></script>
    <script src="js/common.js"></script>
    <script src="js/product.details.js"></script>
    <script type="text/javascript" src="js/laydate.dev.js"></script>
    <script type="text/javascript">
        laydate({
            elem: '#date'
        });
    </script>
</body>
</html>